<!-- 
    姓名：吴俊锋
    学号：20230371174
    班级：计科专升本5班
    日期：2024年5月18日 11:00
    任务：
        用JavaScript编写一个如下图所示的学生信息页面，当用户点击“删除链接时”，可以删除整行。
        要求：
        提交源代码截图和运行效果截图。
        源代码文件添加附件上传。  
    -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息页面</title>
    <style>
        .table {
            border-collapse: collapse;
            width: 600px;
            margin: 0 auto;

        }
        .table, .table th, .table td {
            border: 1px solid #ddd;
            text-align: center;
        }   
        .table th {
            background-color: #827f7f8c;
        }
        
    </style>
</head>
<body>
        <table class="table" id="myTable">
            <tr style="height: 50px;">
                <th style="width: 100px;align-items: center;">姓名</th>
                <th style="width: 200px;align-items: center;">科目</th>
                <th style="width: 100px;align-items: center;">成绩</th>
                <th style="width: 100px;align-items: center;">操作</th>
            </tr>
            <tr style="height: 30px;">
                <td>张三</td>
                <td>JavaScript</td>
                <td>100</td>
                <td><a href="javascript:void(0)" onclick="deleteRow(this)">删除</a></td>
            </tr>
            <tr style="height: 30px;">    
                <td>李四</td>
                <td>JavaScript</td>
                <td>90</td>
                <td><a href="javascript:void(0)" onclick="deleteRow(this)">删除</a></td>
            </tr>
            <tr style="height: 30px;">
                <td>刘五</td>       
                <td>JavaScript</td>
                <td>90</td>
                <td><a href="javascript:void(0)" onclick="deleteRow(this)">删除</a></td>
            </tr>
        </table>
        
        <script>
            function deleteRow(obj){
                    obj.parentNode.parentNode.remove();//删除整行   
            }
        </script>
</body>
</html>